<template>
    <div>
        <home-header :city='city'></home-header>
        <home-swiper :list="swiperList"></home-swiper>
        <home-icons :iconList='iconList'></home-icons>
        <home-recommend :recommendList="recommendList"></home-recommend>
        <home-weekend :weekendList='weekendList'></home-weekend>
    </div>
</template>

<script>
    import HomeHeader from './component/Header'
    import HomeSwiper from './component/Swiper'
    import HomeIcons from './component/Icons'
    import HomeRecommend from './component/Recommend'
    import HomeWeekend from './component/Weekend'
    import axios from 'axios'

    export default {
        name: 'Home',
        components: {
            HomeHeader,
            HomeSwiper,
            HomeIcons,
            HomeRecommend,
            HomeWeekend
        },
        data(){
            return{
                city:'',
                swiperList:[],
                iconList:[],
                recommendList:[],
                weekendList:[]
            }
        },
        methods: {
            getHomeInfo() {
                axios.get('/api/index.json')
                    .then(res => {
                        console.log(res);
                        let ret=res.data.ret
                        console.log(ret);
                        const data=res.data.data
                        console.log(data);
                        if(ret){
                            this.city=data.city[0].city
                            console.log(this.city);
                            this.swiperList=data.swiperList
                            this.iconList=data.iconList
                            this.recommendList=data.recommendList
                            this.weekendList=data.weekendList
                        }
                    })
            }
        },
        mounted() {
            this.getHomeInfo()
        }
    }
</script>

<style lang="scss" scoped>

</style>